<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		body{
			height: 100vh;
			display: flex;
		}
		canvas{
			margin: auto;
		}
	</style>
</head>

<body>
	<canvas width="500" height="500" id="canvas"></canvas>
	<script>
		let canvas = document.getElementById('canvas'),
			ctx = canvas.getContext('2d'),
			font_height = 15,//字体大小
			padding = 35,// 钟面板与画布的间距
			radius = canvas.width / 2 - padding,//圆盘半径
			hand_radius = radius + 20,//数字半径
			seconds_radius = radius - 30,
			minutes_radius = radius - 60,
			hour_radius = radius - 120;
		ctx.font = font_height + 'px Arial';
		function drawClock() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawCircle();// 画钟的圆盘
			drawCenter();// 画中心点
			drawNumerals();// 画数字
			drawHands();// 画指针
		}
		drawClock();

		// 画钟的圆盘
		function drawCircle() {
			ctx.beginPath();
			ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI)
			ctx.stroke();
		}
		// 画中心点
		function drawCenter() {
			ctx.beginPath();
			ctx.arc(canvas.width / 2, canvas.height / 2, 5, 0, 2 * Math.PI)
			ctx.fill();
		}

		// 画数字
		function drawNumerals() {
			let numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], rad = 0, numeralWidth = 0;
			numerals.forEach(function (numeral) {
				//数字对应的角度
				const angle = numeral * (360 / 12)
				// 数字对应的弧度
				const rad = 2 * Math.PI / 360 * angle;//1°等于Math.PI*1弧度 / 180
				numeralWidth = ctx.measureText(numeral).width;
				const x = canvas.width / 2 + Math.sin(rad) * hand_radius - numeralWidth / 2
				const y = canvas.height / 2 - Math.cos(rad) * hand_radius + font_height / 3
				ctx.fillText(numeral, x, y);
			})
		}


		// 画指针
		function drawHands() {
			// 获取时间
			const date = new Date();
			let hour = date.getHours();
			let minutes = date.getMinutes()
			let seconds = date.getSeconds()
			// 处理小时

			hour = hour > 12 ? hour - 12 : hour
			console.log(hour, minutes, seconds)
			// 画秒针
			drawHand(seconds, seconds_radius, 60)
			// 画分针
			drawHand(minutes, minutes_radius, 60)
			// 画时针
			drawHand(hour, hour_radius, 12, minutes * 30 / 60)
		}
		function drawHand(loc, loc_radius, angle, min_angle) {
			console.log(loc_radius)
			// 秒和分对应的角度
			angle = loc * (360 / angle)
			if (min_angle) {
				angle = angle + min_angle
			}
			// 秒和分对应的弧度
			const rad = 2 * Math.PI / 360 * angle;//1°等于Math.PI*1弧度 / 180
			const x = canvas.width / 2 + Math.sin(rad) * loc_radius
			const y = canvas.height / 2 - Math.cos(rad) * loc_radius
			ctx.beginPath();
			ctx.moveTo(canvas.width / 2, canvas.height / 2);
			ctx.lineTo(x, y)
			ctx.stroke();

		}
		function drawNumerals2() {
			//弧度=角度×(π ÷180 )  角度=弧度×（180÷π）
			let numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], rad = 0, numeralWidth = 0;
			numerals.forEach(function (numeral) {
				rad = Math.PI / 180 * numeral * 30;//1°等于Math.PI / 180
				numeralWidth = ctx.measureText(numeral).width;
				ctx.fillText(numeral, canvas.width / 2 + Math.sin(rad) * hand_radius - numeralWidth / 2, canvas.height / 2 + Math.cos(rad) * (-hand_radius) + font_height / 3);
			})
		}
		loop = setInterval(drawClock, 1000)
	</script>
</body>

</html>